<template>
    <div class="baseselect_wrapper">
        <el-select v-model="svalue" size="mini" :placeholder="placeholder" @change="change">
            <el-option
                    v-for="item in options"
                    :key="item[id]"
                    :label="item[name]"
                    :value="item[val]">
            </el-option>
        </el-select>
    </div>
</template>

<script>
    export default {
        name: "BaseSelect",
        props:{
            value: {

            },
            placeholder:{

                default:"请选择"
            },
            id:{
                type:String,
                default:"id"
            },
            api:{
                type: Function
            },
            val:{
                type:String,
                default:"id"
            },
            name:{
                type:String,
                default:"name"
            },
        },
        data(){
          return{
              options:[],
              svalue:null,
          }
        },
        watch:{
          value:{
              handler:function (val) {
                  this.svalue=this.value;
              },
              immediate: true
          }
        },
        created() {
            this.svalue=this.value;
             this.api().then(res=>{
                 if(res.status===0){
                     this.options=res.data;
                 }
             })
        },
        methods:{
            change(data){
                this.$emit("input",data);
                this.$emit("change",this.options.find(item=>item[this.val]===data));
            }
        }
    }
</script>

<style scoped lang="sass">

</style>
